<template>
  <div class="upload-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>基础上传</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <h4>单文件上传</h4>
          <pro-upload
            v-model="singleFile"
            action="/api/upload"
            :headers="headers"
            tip="只能上传 jpg/png 文件，且不超过 10MB"
            accept=".jpg,.jpeg,.png"
            @success="handleUploadSuccess"
          />
        </el-col>

        <el-col :span="8">
          <h4>多文件上传</h4>
          <pro-upload
            v-model="multipleFiles"
            action="/api/upload"
            :headers="headers"
            :multiple="true"
            :limit="3"
            tip="最多上传 3 个文件"
            @success="handleUploadSuccess"
          />
        </el-col>

        <el-col :span="8">
          <h4>拖拽上传</h4>
          <pro-upload
            v-model="dragFiles"
            action="/api/upload"
            :headers="headers"
            :multiple="true"
            :drag="true"
            tip="将文件拖到此处，或点击上传"
            @success="handleUploadSuccess"
          />
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>图片上传</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <h4>图片上传</h4>
          <pro-upload
            v-model="singleImage"
            action="/api/upload"
            :headers="headers"
            type="image"
            accept="image/*"
            tip="只能上传 jpg/png 图片"
            @success="handleUploadSuccess"
          />
        </el-col>

        <el-col :span="8">
          <h4>多图片上传</h4>
          <pro-upload
            v-model="multipleImages"
            action="/api/upload"
            :headers="headers"
            type="image"
            :multiple="true"
            :limit="5"
            accept="image/*"
            tip="最多上传 5 张图片"
            @success="handleUploadSuccess"
          />
        </el-col>

        <el-col :span="8">
          <h4>图片裁剪上传</h4>
          <pro-upload
            v-model="cropImage"
            action="/api/upload"
            :headers="headers"
            type="image"
            :crop="true"
            :cropper-fixed="true"
            :cropper-fixed-number="[16, 9]"
            accept="image/*"
            tip="支持裁剪，固定比例 16:9"
            @success="handleUploadSuccess"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import type { UploadFile } from "element-plus";
import ProUpload from "@/components/ProUpload/index.vue";

// 上传请求头
const headers = {
  Authorization: "Bearer token",
};

// 单文件上传
const singleFile = ref("");

// 多文件上传
const multipleFiles = ref<string[]>([]);

// 拖拽上传
const dragFiles = ref<string[]>([]);

// 单图片上传
const singleImage = ref("");

// 多图片上传
const multipleImages = ref<string[]>([]);

// 裁剪图片上传
const cropImage = ref("");

// 上传成功回调
const handleUploadSuccess = (response: any, file: UploadFile) => {
  ElMessage.success(`文件 ${file.name} 上传成功`);
};
</script>

<style lang="scss" scoped>
.upload-example {
  h4 {
    margin: 0 0 16px;
    color: #606266;
  }
}
</style>
